<template>
  <div :class="[prefixCls+'-color-picker']">
    <div :class="{[prefixCls+'-color-picker-trigger']:true,[prefixCls+'-color-picker-disabled']:disabled,[prefixCls+'-color-picker-'+size]:size}" ref="control">
      <span class="alpha">
        <span class="bg" :style="{background:value}">
          <Icon type="arrow-down" />
        </span>
      </span>
    </div>

    <transition name="animation-drop">
      <div :class="[prefixCls+'-color-picker-panel']" v-if="show" ref="drop" @click="onPickerPanel">
        <PickerCanvas  :color="color" @change="changeFromCanvas"></PickerCanvas>
        <div class="slider-box">
          <div class="copy-color">
            <div style="width: 100%;height: 100%;background-color: black;" :style="{backgroundColor: target}"></div>
          </div>
          <div class="slider-outer">
            <PickerSlider class="slider" :max="360" :min="0" v-model="color.h" start-on="right" @change="changeFromHue" >
              <div class="hue-bar"></div>
            </PickerSlider>
            <PickerSlider class="alpha slider" :max="1" :min="0" v-model="color.a"  @change="changeFromAlpha" :step="0.01" >
              <div style="width: 100%;height: 100%" :style="alphaStyle"></div>
            </PickerSlider>

          </div>
        </div>
        <div class="format">
          <div class="inputs" >
            <div class="hex" v-show="format=='hex'">
              <input type="text" :value="target" @input="changeHex" @change="changeHex">
              <div class="format-txt">HEX</div>
            </div>
            <div class="rgba" v-show="format=='rgba'">
              <div style="width: 25%">
                <input type="number" v-model.number="color.r" @change="changeFromRGB">
                <div class="format-txt">R</div>
              </div>
              <div style="width: 25%">
                <input type="number" v-model.number="color.g" @change="changeFromRGB">
                <div class="format-txt">G</div>
              </div>
              <div style="width: 25%">
                <input type="number" v-model.number="color.b" @change="changeFromRGB">
                <div class="format-txt" >B</div>
              </div>
              <div style="width: 25%">
                <input type="number" v-model.number="color.a" @change="changeFromAlpha">
                <div class="format-txt" >A</div>
              </div>
            </div>
            <div class="hsla" v-show="format=='hsla'">
              <div style="width: 25%">
                <input type="number" v-model.number="color.h" @change="changeFromHue">
                <div class="format-txt">H</div>
              </div>
              <div style="width: 25%">
                <input type="number" v-model.number="color.s" @change="changeFromHSL">
                <div class="format-txt">S</div>
              </div>
              <div style="width: 25%">
                <input type="number" v-model.number="color.l"  @change="changeFromHSL">
                <div class="format-txt" >L</div>
              </div>
              <div style="width: 25%">
                <input type="number" v-model.number="color.a"  @change="changeFromAlpha">
                <div class="format-txt" >A</div>
              </div>
            </div>

          </div>
          <div class="switch">
            <svg width="20" height="22" xmlns="http://www.w3.org/2000/svg" @click="inputsSwitch">
              <polygon points="7,8 13,8 10,4" style="fill:#000;"/>
              <polygon points="7,13 13,13 10,17" style="fill:#000;"/>
            </svg>
          </div>
        </div>
        <div class="palettes">
          <div class="colors">
            <Material v-if="material" @change="changeFromMaterial"></Material>
            <div v-else class="rgb-slider-box">
              <PickerSlider v-model="color.r" start-on="right" @change="changeFromRGB" :max="255" :min="0" style="margin-top: 10px" >
                <div class="slider-bg" :style="sliderRStyle"></div>
              </PickerSlider>
              <PickerSlider v-model="color.g" start-on="right" @change="changeFromRGB" :max="255" :min="0" >
                <div class="slider-bg" :style="sliderGStyle"></div>
              </PickerSlider>
              <PickerSlider v-model="color.b" start-on="right" @change="changeFromRGB" :max="255" :min="0" >
                <div class="slider-bg" :style="sliderBStyle"></div>
              </PickerSlider>
            </div>
          </div>
          <div class="switch" style="width:50px;">
            <svg width="20" height="22" xmlns="http://www.w3.org/2000/svg" @click="paletteSwitch">
              <polygon points="7,8 13,8 10,4" style="fill:#000;"/>
              <polygon points="7,13 13,13 10,17" style="fill:#000;"/>
            </svg>
            <mj-button size="small" type="primary" style="margin-top:12px;" @click="onSubmit">确定</mj-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {prefixCls} from '../prefix'
import {Color, HUES} from './color'
import PickerSlider from "./PickerSlider";
import PickerCanvas from "./PickerCanvas";
import Material from "./Material";
import './colorpicker.css'
import popup from '../../utils/popup'

export default {
  name: `${prefixCls}ColorPicker`,
  components:{PickerSlider,PickerCanvas,Material},
  props: {
    value: {
      type: String, 
      default: "#FF0000"
    },
    transfer:{//弹层放置于body内
      type:Boolean,
      default:false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String
    },
    change: Function,//下拉选择后回调
  },
  data() {
    return {
      prefixCls: prefixCls,
      format: "hex",
      target: this.value,
      color: new Color(this.value),
      ctx2d: null,
      cPointX: 0, cPointY: 0,
      hue:0,
      cWidth: 0,
      cHeight: 0,
      material:true,
      show: false,
      isPanel:false,//用于判断是否在弹层上点击，阻止自动收起
    }
  },
  mounted() {

    //禁用右键菜单
    this.$el.oncontextmenu=(ev)=>{
      // console.log(ev);
      return ev.target instanceof HTMLInputElement
      //return false
    };
    if(!this.disabled){
      document.addEventListener('click', this._showHide);
    }
  },
  methods: {
    _showHide(e){
      if(this.isPanel){
        this.isPanel = false
        return false

      }
      if (this.$el.contains(e.target)) {
        this.show = !this.show

        if(this.transfer){
            if(this.show){
               this.$nextTick(()=> {
                  popup.create({drop:this.$refs.drop})
               })
            }
        }
        this.$nextTick(()=> {
          popup.position({
            trigger:this.$refs.control,//触发层
            drop:this.$refs.drop,//下拉层
            body:this.transfer,//是否将弹层置于body中
          })
        })

      }else {
        this.show = false;
      }
    },
    changeHex(ev){
      let val=ev.target.value
      if(/^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(val)){
        this.target=val;
        this.color.fromHex(val)
        this.$emit("input",val)
        console.log(val)
      }
    },
    changeFromCanvas(r,g,b){
      //console.log(util.toJSON(arguments));
      let hsl=Color.rgb2hsl(r,g,b);
      Object.assign(this.color,{r,g,b,h:this.color.h,s:hsl[1],l:hsl[2]});
      this.target=this.color.toHex();
    },
    changeFromHue(val){
      this.color.fromHSL();
      this.target=this.color.toHex();
    },
    changeFromAlpha(val){
      this.target=this.color.toHex();
    },
    changeFromMaterial(val){
      this.color.fromHex(val)
      //console.log(this.color)
      this.target=val;
    },
    paletteSwitch(){
      this.material=!this.material;
    },
    changeFromRGB(){
      this.color.fromRGB()
      this.target=this.color.toHex();
    },
    changeFromHSL(){
      this.color.fromHSL();
      this.target=this.color.toHex();
    },
    inputsSwitch() {
      switch (this.format) {
        case "hex":
          this.format = "rgba";
          break;
        case "rgba":
          this.format = "hsla";
          break;
        case "hsla":
          this.format = 'hex'
      }
    },
    onPickerPanel(){
      this.isPanel = true
    },
    onSubmit(){
      this.isPanel = false
      this.show = false
    },
  },
	computed:{
    cPointStyle(){
			return {right:this.cPointX-6+'px',
        top:this.cPointY-6+'px'}
		},
    alphaStyle(){
      return {background: `linear-gradient(to left, rgba(${this.color.r},${this.color.g},${this.color.b},1), rgba(${this.color.r},${this.color.g},${this.color.b},0))`}
    },
    sliderRStyle(){
      return {background: `linear-gradient(to left, rgb(${0},${this.color.g},${this.color.b}), rgb(${255},${this.color.g},${this.color.b}))`}
    },
    sliderGStyle(){
      return {background: `linear-gradient(to left, rgb(${this.color.r},${0},${this.color.b}), rgb(${this.color.r},${255},${this.color.b}))`}
    },
    sliderBStyle(){
      return {background: `linear-gradient(to left, rgb(${this.color.r},${this.color.g},${0}), rgb(${this.color.r},${this.color.g},${255}))`}
    }
	},
  watch: {
    value(n, o) {
      // this.target = n;
      // console.log('www',n)
    },
    target(n,o) {
      this.$emit('input',n)
      this.$emit('change',n)
    }
  },
  beforeDestroy() {
    document.body.removeEventListener('click', this._showHide);
  },
}
</script>